<template>
  <div>
    <div :id="id" :style="chartStyle">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import echarts from "echarts";
import defaultImange from "./bgBlue.png";
@Component
export default class DdPie extends Vue {
  myChart: any = null;
  // chart图表的总体样式 ，如宽 高 、background等
  @Prop({
    type: String,
    default: "width:400px;height:200px;"
  })
  chartStyle!: any;

  // echarts 所在的id
  @Prop({
    type: String,
    default() {
      let idStr = "";
      for (let i = 0; i < 6; i++) {
        let randomChar: string = String.fromCharCode(
          65 + Math.floor(Math.random() * 19) + i
        );
        idStr += randomChar;
      }
      return idStr;
    }
  })
  id!: string;

  // 鼠标悬移提示内边距
  @Prop({
    type: Array,
    default() {
      return [10, 14, 10, 10];
    }
  })
  tooltippadding!: any;

  // charts item  color,
  @Prop({
    type: Array,
    default() {
      return ["#5f9dff", "#6be1c1", "#ffd86e", "#ee5959", "#7d92d4"];
    }
  })
  itemColor!: any;

  // 悬浮数据显示格式
  @Prop({
    type: String,
    default() {
      return "{b} : {c} ({d}%)";
    }
  })
  formatter!: string;

  // 提示框的位置 右边距
  @Prop({
    type: String,
    default: "0px"
  })
  toolboxRight!: string;

  // 提示框的位置 上边距
  @Prop({
    type: String,
    default: "10px"
  })
  toolboxTop!: string;

  // 是否显示下载图标
  @Prop({
    type: Boolean,
    default: true
  })
  showDownloadIcon!: boolean;

  // 下载后的文件名称
  @Prop({
    type: String,
    default: "DdPie"
  })
  fileName!: string;

  // 数据的名称
  @Prop({
    type: String,
    default: "DdPie图表"
  })
  seriesName!: string;

  // 中心位置
  @Prop({
    type: Array,
    default() {
      return ["50%", "60%"];
    }
  })
  center!: any;

  // 数据
  @Prop({
    type: Array,
    // require:true,
    default() {
      return [];
    }
  })
  seriesData!: any;

  @Watch("seriesData", { deep: true })
  getSeriesData() {
    this.$nextTick(function() {
      this.draw();
    });
  }

  @Watch("chartStyle")
  getChartStyle() {
    this.myChart.resize();
  }

  mounted() {
    this.$nextTick(function() {
      this.draw();
    });
    // this.draw();
  }

  draw() {
    if (document.getElementById(this.id)) {
      this.myChart =
        this.myChart == null
          ? echarts.init(document.getElementById(this.id))
          : this.myChart;
      this.myChart.setOption({
        color: this.itemColor,
        tooltip: {
          padding: this.tooltippadding,
          trigger: "item",
          formatter: this.formatter,
          backgroundColor: "rgba(50, 50, 50, 0.7)",
          borderColor: "rgb(51, 51, 51)",
          borderWidth: 0,
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontFamily: "微软雅黑"
          }
        },
        toolbox: {
          right: this.toolboxRight,
          top: this.toolboxTop,
          show: this.showDownloadIcon,
          iconStyle: {
            normal: {
              borderColor: "#5c6781"
            },
            emphasis: {
              borderColor: "#4990ff"
            }
          },
          orient: "horizontal",
          itemGap: 10,
          itemSize: 60,
          showTitle: true,
          feature: {
            saveAsImage: {
              show: true,
              name: this.fileName,
              // top: '0px',
              title: " ",
              icon: "image://" + defaultImange
            }
          }
        },
        series: [
          {
            name: this.seriesName,
            type: "pie",
            radius: "65%",
            // avoidLabelOverlap: false,
            center: this.center,
            selectedMode: "single",
            hoverAnimation: false,
            hoverOffset: 30,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            labelLine: {
              normal: {
                show: true,
                lineStyle: {
                  color: "#b1b1b1"
                }
                // length:30,
                // length2:15
              },
              emphasis: {
                show: true
              }
            },

            data: this.seriesData,
            itemStyle: {
              emphasis: {
                shadowBlur: 0,
                shadowOffsetX: 0,
                label: {
                  textStyle: {
                    fontFamily: "微软雅黑"
                  }
                }
              }
            }
          }
        ]

        // legend: {
        //   orient: "vertical",
        //   left: "left",
        //   data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
        // },
      });
      var _this = this;
      window.addEventListener("resize", function() {
        _this.myChart.resize();
      });
    }
  }
}
</script>

<style></style>
